<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚线边框动画</title>
    <style>
        /*一条边的写法*/
        /* div{
            width: 100px;
            height: 100px;
            background: linear-gradient(90deg , #333 50%, transparent 0) repeat-x;
            background-size: 4px 1px;
            background-position: 0 0 ;
        } */
        /* 四条边的写法 */
        html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    position: relative;
    width: 140px;
    height: 64px;
    margin: auto;
}

.gradient {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    cursor: pointer;
    
   
}

.gradient:hover {
        animation: linearGradientMove .3s infinite linear;
    }


    .container{
        width: 200px;
        height: 200px;
        background: rgb(3, 169, 206);
        background-size: 120% 120%;
        display: flex;
        justify-content: center;
        align-items: center ;
    }
.outline {
     /* border: 1px solid #333; */
    outline: 1px solid #fff;
    outline-offset: -1px;
    transition: all .3s linear;
    cursor: pointer;
}

.outline:hover {
         /* border: 1px solid transparent; */
        outline: 1px solid transparent;
        background: 
            linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #fff 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #fff 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        animation: linearGradientMove .3s infinite linear;
    }

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
} 
       
    </style>
</head>
<body>
    使用dashed 关键字是没办法让虚线动的 ， 但是可以用渐变来实现
    <div class="gradient"></div>
    <div class="container">
        <div class="outline">Hover Me</div>

    </div>
</body>
</html>